<div class="p-3" mouseleave.trigger="onMouseLeave()" if.bind="!error">
    <tree-node if.bind="!!current" syntax-node.bind="current" vm.bind="$this"></tree-node>
</div>
<div else class="text-danger p-3">
    ${error}
</div>

<div portal="#codePaneToolbarRightPortal">
    <i class="icon-button fa-solid fa-list-ol ${showCharSpans ? 'active' : ''}"
       click.trigger="showCharSpans = !showCharSpans"
       title="Show Line/Char Spans"></i>
    <i class="icon-button tree-collapse-all-icon"
       click.trigger="collapse(current, true)"
       title="Collapse All"></i>
    <i class="icon-button tree-expand-all-icon"
       click.trigger="expand(current, true)"
       title="Expand All"></i>
</div>

<template as-custom-element="tree-node" class="d-flex flex-column justify-content-center gap-1 mt-1">
    <bindable name="syntaxNode"></bindable>
    <bindable name="vm"></bindable>

    <div class="nesting-line"></div>

    <div class="d-flex align-items-center gap-3 tree-node-header"
         mouseover.trigger="vm.highlightInEditor(syntaxNode) & debounce:100">

        <i class="node-expander action-icon caret-down-icon ${syntaxNode.collapsed ? 'collapsed' : ''}"
           if.bind="syntaxNode.children.length > 0 || syntaxNode.leadingTrivia.length > 0 || syntaxNode.trailingTrivia.length > 0"
           click.trigger="syntaxNode.collapsed = !syntaxNode.collapsed"></i>
        <i else class="caret-right-icon invisible"></i>

        <div class="d-flex align-items-center gap-3 flex-grow-1"
             click.trigger="vm.revealInEditor(syntaxNode)"
             dblclick.trigger="vm.selectInEditor(syntaxNode)">
            <i class="fa-fw fa-solid ${syntaxNode.isNode ? 'fa-code-commit text-blue' : 'fa-minus text-yellow'}"
               title="${syntaxNode.isNode ? 'Node' : 'Token'}"></i>

            <span class="${syntaxNode.isMissing ? 'text-danger' : ''}"
                  title.bind="syntaxNode.type">
                ${syntaxNode.kind}
            </span>

            <span class="tree-node-header-right">
                <span class="value-text"
                      if.bind="syntaxNode.valueText">
                    ${syntaxNode.valueText}
                </span>

                <span class="char-span"
                      if.bind="syntaxNode.span && (syntaxNode.isToken || syntaxNode.children.length > 1)"
                      show.bind="vm.showCharSpans">
                    [${syntaxNode.span.start.line},${syntaxNode.span.start.character}:${syntaxNode.span.end.line},${syntaxNode.span.end.character}]
                </span>
            </span>

            <span if.bind="syntaxNode.isMissing"
                  class="ms-auto text-danger"><i>Missing</i></span>
        </div>
    </div>

    <div if.bind="syntaxNode.isNode && syntaxNode.children.length > 0"
         show.bind="!syntaxNode.collapsed">
        <tree-node repeat.for="child of syntaxNode.children"
                   syntax-node.bind="child"
                   vm.bind="vm"></tree-node>
    </div>

    <div
        if.bind="syntaxNode.isToken && (syntaxNode.leadingTrivia.length > 0 || syntaxNode.trailingTrivia.length > 0)"
        show.bind="!syntaxNode.collapsed"
        class="d-flex flex-column">
        <syntax-trivia repeat.for="trivia of syntaxNode.leadingTrivia"
                       trivia.bind="trivia"
                       vm.bind="vm">
        </syntax-trivia>

        <div if.bind="syntaxNode.valueText"
             class="value-trivia"
             mouseover.trigger="vm.highlightInEditor(syntaxNode) & debounce:100">
            <i class="fa-fw fa-solid fa-hashtag text-muted" title="Value"></i>
            <span class="font-monospace">${syntaxNode.valueText}</span>
        </div>

        <syntax-trivia repeat.for="trivia of syntaxNode.trailingTrivia"
                       trivia.bind="trivia"
                       vm.bind="vm">
        </syntax-trivia>
    </div>
</template>

<template as-custom-element="syntax-trivia">
    <bindable name="trivia"></bindable>
    <bindable name="vm"></bindable>

    <div mouseover.trigger="vm.highlightInEditor(trivia) & debounce:100">
        <i class="fa-fw fa-solid fa-hashtag text-muted" title="Trivia"></i>
        <span class="font-monospace">${trivia.displayValue || trivia.kind}</span>
    </div>
</template>
